<template>
    <div>
        <div class="top_header">
            <wd-header title="已订阅课程记忆">
                <span class="iconfont" @click="goback" slot="left">&#xe697;</span>
            </wd-header>
        </div>
        <div class="versionList" v-if="lists.length>0" >
            <ul v-infinite-scroll="loadMore" infinite-scroll-distance="10">
                <router-link tag="div" :to="{name:'singlebook',params:{
                    classid:item.classId,
                    title:item.grade_name,
                    payid:item.classId,
                    imgurl:item.imgurl,
                    content:item.class_name,
                    paytype:item.payType
                } }" class="oneOf" v-for="(item,index) in lists" :key="index">
                    <div class="top">
                        <div class="left">
                            <img v-lazy="item.imgurl" alt="">
                        </div>
                        <div class="right">
                            <p>{{item.class_name}}</p>
                            <span>{{item.grade_name}}</span>
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="bottomLeft">
                            <span class="many">{{item.orders}}</span>人学习
                        </div>
                        <div class="bottomRight">
                            共{{item.total_lessons}}单元
                        </div>
                    </div>
                </router-link>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    name: 'mylesson',
    data() {
        return {
            lists: [],
            pageIndex: 1,
            auth: JSON.parse(localStorage.user),
            url: 'http://www.jydsapp.com/jydsApi/api/h5/study/getWodeBook'
        }
    },
    beforeRouteLeave(to, from, next) {
        let routeinfo = to.params // 从主页或单词主页到列表页和购买页的数据
        this.$store.commit('saveWordIndexToSingleBookOrBuyData', routeinfo)
        next()
    },
    created() {
        this.getData()
    },
    watch:{
        pageIndex(){
            this.getData()
        }
    },
    methods: {
        goback() {
            this.$router.push({
                name: 'index'
            })
        },
        loadMore(){
            this.pageIndex+=1
        },
        getData() {
            let str = `{"gradeType":1,
                        "userPhone":"${this.auth.user.phoneNum}",
                        "token":"${this.auth.token}",
                        "pageIndex":${this.pageIndex},
                        "selectType":1}`
            let toast = this.$Toast({
                content: '加载中…',
                iconClass: 'loader',
                autoClose:false
            })
            this.fetch({
                method: 'post',
                url: this.url,
                params: {
                    "paramStr": str
                }
            }).then((data) => {
                let res = data.data
                if (res.code == 200) {
                    toast.close()
                    let temp = JSON.parse(res.data).versionList
                    this.lists = this.lists.concat(temp)
                } else if (res.code == 106) {
                    if(this.pageIndex == 1){
                        toast.close()
                        this.$Toast({
                            content: '未订阅课程,去订阅吧',
                        })
                        setTimeout(() => {
                            this.$router.replace('/seriesword')
                        }, 1000)
                    }else{
                        this.$Toast({
                            content: '已加载全部课程'
                        })
                        toast.close()
                    }
                } else if (res.code == 103) { //五天内未登录 token失效跳转到登陆页面
                    toast.close()
                    localStorage.removeItem('user')
                    this.$Toast({
                        content: '请重新登录'
                    })
                    this.$router.replace('/login')
                } else {
                    toast.close()
                    this.$Toast({
                        content: res.message,
                    })
                }
            }).catch((err) => {
                
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.animated {
    animation-duration: .5s;
}

.top_header{
    position:fixed;
    width: 100%;
    top: 0;
    left: 0;
}

.versionList {
    margin-top: 1.296296rem;
    background: #eee;
    padding: 0.37037rem 0.185185rem;
    .oneOf {
        background: #fff;
        padding: 0.277778rem;
        margin-bottom: 0.277778rem;
        .top {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #eee;
            padding-bottom: 0.277778rem;
            .left {
                flex: 1;
                img {
                    width: 100%;
                }
            }
            .right {
                flex: 1;
                margin-left: 0.37037rem;
                p {
                    font-size: 0.444444rem;
                    color: #333;
                    margin: 0.277778rem 0 0.37037rem 0;
                }
                span {
                    color: #ff9920;
                }
            }
        }
        .bottom {
            display: flex;
            justify-content: space-between;
            padding-top: 0.185185rem;
            color: #333;
            .bottomLeft {
                .many {
                    color: #fe4f4a;
                }
            }
        }
    }
}
</style>
